
<template>
  <div class="projectInfo">
    <van-button round type="success">项目信息</van-button>
    <div class="projectInfo-info">
      <projectInfo
        :formData="data.projectInfoFormData"
        :config="data.projectInfoConfig"
      ></projectInfo>
    </div>
    <div class="projectInfo-bill">
      <van-button class="projectInfo-bill--btn" round type="success">资产台账</van-button>
      <van-search 
        v-model="queryForm.keyword" 
        placeholder="请输入资产名称/资产编号" 
        right-icon="search"
        left-icon=""
        @change="queryProjectAssetsCont()"
      />
      <ysnTable
        class="projectInfo-bill--table"
        :data="data.billTableList"
        :column="data.billTableConfig"
      >
        <template #contractCode="scope">
          <div @click="goContractDetails(scope.row)" class="projectInfo-bill--table-num">
            {{ scope.row.contractCode || '-' }}
          </div>
        </template>
      </ysnTable>
    </div>
  </div>
</template>

<script setup lang="ts">
import projectInfo from '@/components/projectInfo/index.vue'
import { config } from './config'
import { reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ProjectListApi } from "@/api/projectList";
let router = useRouter()
let route = useRoute()
let data = reactive({
  projectInfoFormData: {},
  projectInfoConfig: [],
  billTableList: [],
  billTableConfig: [],
})
let queryForm = reactive({
  keyword: ''
})
function goContractDetails(item: any){
  if(!item.contractCode) return
  router.push({
    path: 'contractDetails',
    query: {
      id: item.contractId,
      projectName: route.query.projectName
    }
  })
}
config(data)


init()
function init(){
  Promise.all([
    ProjectListApi.queryById({
      projectId: route.query.projectId as string
    }),
  
  ]).then(res => {
    res.forEach((val, index: number) => {
      switch (index) {
        case 0:
          data.projectInfoFormData = val
          break;
       
        default:
          break;
      }
    });
  })
  queryProjectAssetsCont()
}

function queryProjectAssetsCont(){
  ProjectListApi.queryProjectAssetsCont({
    projectId: route.query.projectId as string,
    keyword: queryForm.keyword
  }).then((res: any) => {
    data.billTableList = res
  })
}
</script>

<style lang="scss">
  .projectInfo{

    &-info{
      margin-top: 0.5rem;
      padding-left: 1.2rem;
    }

    &-bill{

      margin-top: 2.9rem;

      &--btn{
        margin-bottom: 1.7rem;
      }

      &--table{
        margin-top: 1.7rem;
        margin-bottom: 1rem;

        &-num{
          color: $spare21;
        }
      }
    }
  }
</style>
